import React, { useState } from 'react';
import { Box, Pill, SecondaryButton, Text, ThemeColorType } from '@nova-hf/ui';
import { IconType } from '@nova-hf/ui/umd/ts/src/icon-library/iconMap';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { formatDate } from 'beta/utils/helpers';
import { useTranslation } from 'beta/utils/i18n';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { RequestStatus, useContractChangeRequestsQuery, useContractQuery } from 'typings/graphql';

import { SectionHeader } from '../../../thjonustur/[serviceId]/comoponents/SectionHeader';

type StatusInfo = {
  color: ThemeColorType;
  icon: IconType;
  text: string;
};

const ContractPackRequestContainer = () => {
  const { t } = useTranslation('containers');
  const router = useRouter();
  const contractId = typeof router?.query?.contractId === 'string' ? router?.query?.contractId : '';
  const [showRequests, setShowRequests] = useState(true);

  const { data, loading, error } = useContractChangeRequestsQuery({
    variables: {
      input: {
        id: contractId,
      },
    },
  });

  const { data: contractData } = useContractQuery({
    variables: {
      input: {
        id: contractId,
      },
    },
  });

  const requests = data?.contractChangeRequests;
  const variant = contractData?.contract?.variant?.id;

  const getStatusInfo = (status: RequestStatus | string): StatusInfo | undefined => {
    if (status === RequestStatus.Processed) {
      return {
        color: 'success',
        icon: 'checkMark',
        text: t('contractRequestsContainer.status.processed'),
      };
    }
    if (status === RequestStatus.Error) {
      return { color: 'warning', icon: 'close', text: t('contractRequestsContainer.status.error') };
    }
    if (status === RequestStatus.Pending) {
      return {
        color: 'yellow',
        icon: 'return',
        text: t('contractRequestsContainer.status.pending'),
      };
    }

    return undefined;
  };

  if (!data || error || loading || !requests?.length) {
    return null;
  }

  return (
    <Box>
      <Box display="flex" flexDirection="column" gap={2}>
        <Box>
          <SectionHeader
            headerTitle={t('contractRequestsContainer.packChanges')}
            rightActionNode={
              <SecondaryButton
                colorScheme={'purple'}
                icon={showRequests ? 'minus' : 'add'}
                text={
                  showRequests ? t('contractItemsContainer.hide') : t('contractItemsContainer.show')
                }
                onClick={() => setShowRequests(!showRequests)}
              />
            }
          />
        </Box>
        {showRequests && (
          <Box>
            <Box borderBottomStyle="solid" color="black100" borderWidth="2px" paddingBottom={2}>
              <Box display="grid" gridTemplateColumns={6} gap={2} alignItems="center">
                <Text variant="eyebrowSmall">{t('contractRequestsContainer.headers.pack')}</Text>
                <Text variant="eyebrowSmall">{t('contractRequestsContainer.headers.newPack')}</Text>
                <Text variant="eyebrowSmall">
                  {t('contractRequestsContainer.headers.processTime')}
                </Text>
                <Text variant="eyebrowSmall">{t('contractItemsContainer.headers.status')}</Text>
                <Text variant="eyebrowSmall">{t('contractItemsContainer.headers.created')}</Text>
                <Text variant="eyebrowSmall">{t('contractItemsContainer.headers.updated')}</Text>
              </Box>
            </Box>
            {requests?.map((item) => (
              <React.Fragment key={item?.id}>
                <Box display="grid" gridTemplateColumns={6} gap={2} alignItems="center" marginY={2}>
                  <Text variant="pSmallRegular">{item?.currentVariantId}</Text>
                  <Text variant="pSmallRegular">{item?.newVariantId ?? variant}</Text>
                  <Text variant="pSmallRegular">
                    {item?.processTime
                      ? formatDate(item?.processTime, 'dd.MM.yyyy')
                      : t('contractRequestsContainer.notFound')}
                  </Text>
                  <Pill
                    text={getStatusInfo(item?.status ?? '')?.text ?? ''}
                    color={getStatusInfo(item?.status ?? '')?.color as MainColorType}
                    maxWidth="fitContent"
                    icon={{
                      icon: getStatusInfo(item?.status ?? '')?.icon,
                      color: item?.status === 'Pending' ? 'black100' : 'white',
                      size: 16,
                    }}
                  />
                  <Text variant="pSmallRegular">
                    {item?.created
                      ? formatDate(item?.created, 'dd.MM.yyyy')
                      : t('contractRequestsContainer.notFound')}
                  </Text>
                  <Text variant="pSmallRegular">
                    {item?.updated
                      ? formatDate(item?.updated, 'dd.MM.yyyy')
                      : t('contractRequestsContainer.notFound')}
                  </Text>
                </Box>
                <Box
                  borderColor="grey200"
                  borderBottomStyle="solid"
                  borderWidth="1px"
                  marginBottom={2}
                ></Box>
              </React.Fragment>
            ))}
          </Box>
        )}
      </Box>
    </Box>
  );
};

export default inject('ui', 'authentication')(observer(ContractPackRequestContainer));